<template>
  <view class="wh100 selectCpn-style">
    <picker
      @change="(e) => textCG(e.detail.value)"
      :value="selectIndex"
      :range="options"
      :range-key="rangeKey"
      style="z-index: 99"
    >
      <slot>
        <view class="pick-input">
          <!-- <image src="../../static/images/decision/place.png" mode="" style="width:21rpx;height:24rpx" /> -->
          <text class="ml10"> {{ selectName }}</text>
          <tui-icon
            v-if="!isSolid"
            :size="20"
            :color="iconColor"
            class="click-icon"
            name="arrowdown"
          >
          </tui-icon>
          <tui-icon
            v-else
            :size="20"
            :color="iconColor"
            class="click-icon"
            name="turningdown"
          >
          </tui-icon>
          <!-- <i class="iconfont icon-xuanzeanniu" style="font-size:18rpx"></i> -->
        </view>
      </slot>
    </picker>
  </view>
</template>
<script>
export default {
  name: "",
  props: {
    isSolid: {
      type: Boolean,
      default: false,
    },
    rangeKey: {
      type: String,
      default: "text",
    },
    value: {
      type: null,
      default: null,
    },
    show: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [],
    },
    iconColor: {
      type: String,
      default: "666",
    },
  },
  components: {},
  data() {
    return {
      dropdownShow: false,
      selectIndex: "",
      selectName: "",
    };
  },
  methods: {
    textCG(index) {
      this.selectIndex = index;
      const items = this.options[index];
      this.$emit("change", items);
      this.$emit("update:value", items.value);
    },
    setValue() {
      const index = this.options.findIndex((t) => {
        return t.value == this.value;
      });
      let item = this.options[index];
      if (item) {
        this.selectName = item[this.rangeKey];
        this.selectIndex = index;
      }
    },
  },
  computed: {},
  mounted() {
    this.setValue();
  },
  watch: {
    value() {
      this.setValue();
    },
    options() {
      this.setValue();
    },
  },
};
</script>
<style lang="scss">
.wh100 {
  display: inline-block;
}
.pick-input {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 26rpx;
  justify-content: center;
}

/deep/.uni-picker-container {
  z-index: 999999 !important;
}
</style>
